// src/App.tsx
import React, { useEffect, useState } from "react";
// import "./app.less"; // 引入 Less 文件
import "@/app.less";
import "@/apptest";
import Count from "./Count/Count";

interface State {
  count: number;
}
type Status = "idle" | "loading" | "success" | "error";
function App() {
  const [count, setCount] = useState(0);
  const [status, setStatus] = useState<Status>("idle");
  const handleClick = () => {
    setCount(count + 1);
    setStatus("success");
  };

  useEffect(() => {
    fetch("api/tutorials", {
      method: "post", // HTTP请求方式
      body: JSON.stringify({
        id: "1", // 在服务器端通过req.body.eid方式获取
        title: "test",
        description: "test",
        published: true,
        createAt: "2022-01-01T00:00:00.000Z",
        updateAt: "2022-01-01T00:00:00.000Z",
      }),
      headers: {
        "Content-Type": "application/json",
      },
    })
      .then((res) => {
        return res.json(); // 不是用户需要的数据，通过return返回给浏览器
      })
      .then((data) => {
        // 服务器返回给客户端的数据
        console.log(data.msg);
      })
      .catch((e) => {
        console.log(e);
      });
  }, []);

  return (
    <div className="App">
      <h2>webpack5-react-ts</h2>
      <div>{count}</div>
      <div>{status}</div>
      <Count />
      <div onClick={handleClick}>click me</div>
    </div>
  );
}

export default App;
